<template>
  <div>
    <vue-particles
        color="#3B5780"
        :particleOpacity="0.7"
        :particlesNumber="80"
        shapeType="circle"
        :particleSize="4"
        linesColor="#000"
        :linesWidth="1"
        :lineLinked="true"
        :lineOpacity="0.4"
        :linesDistance="80"
        :moveSpeed="2"
        :hoverEffect="true"
        hoverMode="grab"
        :clickEffect="false"
        clickMode="bubble"
    >
    </vue-particles>
    <div class="bg"><p class="shine">进销存管理系统</p></div>

  </div>
</template>
<script>
export default {
  data() {
    return {}
  }
}
</script>

<style scoped>
.bg{
  position: absolute;
  top: 120px;
  left:600px;
z-index: 20;
}
.shine{
  font-size: 60px;
  text-align: center;
  background: -webkit-linear-gradient(left, #0f0, #00f) 0 0 no-repeat;/*设置线性渐变*/
  -webkit-background-size: 450px;                        /*设置背景大小*/
  -webkit-background-clip: text;                            /*背景被裁剪到文字*/
  -webkit-text-fill-color: rgba(255, 255, 255, 0.3);        /*设置文字的填充颜色*/
  -webkit-animation: shine 3s infinite;                    /*设置动画*/
}
@-webkit-keyframes shine{   /*创建动画*/
  0%{
    background-position: 0 0;
  }
  100%{
    background-position: 100% 100%;
  }
}

</style>